<script setup>
const xinming ='张小白'
const xueyuan ='电子信息工程学院'
const nianji ='2025'
const zhuanye='电子信息工程专业'
const banji='202301班'
const shijian='2023/02/03'
const bool='是'
const zongtian='30'
</script>

<template>
  <div class="main">
    <div class="top">
      <h1 class="h1">返校申请</h1>
      <div class="shang">
        <div>
          <img class="xiaolian" src="../../static/image/img/buxixi.png" alt="">
        </div>
        <div style="font-size: 12px">
          <div style="font-size: 22px;font-weight: bold;text-align: center">不通行状态</div>
          请完全返校申请后
          <br>
          可开启同行状态
        </div>
      </div>
      <div style="font-size: 12px;position: absolute;bottom: 45px;left: 55px;opacity: 0.5">
        若有疑问请联系辅导员，学校门禁系统问题联系保卫处
      </div>
    </div>

    <div class="xinxi">
      <div class="jianjie">
        <div style="position: absolute;top:15px;left: 17px">
          <div style="font-weight: bold;font-size: 20px">{{xinming}}提交的返校申请</div>
          <div style="opacity: 0.5">{{xueyuan}}</div>
        </div>
        <div>
          <img class="icon" src="../../static/image/img/2165@2x.png" alt="">
        </div>
      </div>
      <div class="jianjie" style="position: absolute;bottom: 10px;left: 17px;font-size: 12px;opacity: 0.5">
        所在年级：{{nianji}}<br>
        所在专业：{{zhuanye}}<br>
        所在班级：{{banji}}<br>
      </div>
    </div>
    <div class="liucheng">
      <div style="font-size: 14px;position: absolute;top: 8px;left: 17px">
        <div style="font-size: 12px;opacity: 0.5">返校申请</div>
        <div>申请时间{{shijian}}</div>
        <div>延期时间{{shijian}}</div>
        <div>是否超过请假结束时间：{{bool}}</div>
        <div>合计请假时间：{{zongtian}}天</div>
      </div>
      <div class="xia">
        <div>关联请假记录</div>
        <div style="display: flex;float: right">
          <view class="anniu" @click="">查看记录></view>
        </div>
      </div>
    </div>
    <div class="pizhun">
      <view>
        <view id="background">
          <view id="h1">
            <view>
              返校申请流程
            </view>
            <view id="h1_1">
              <view id="decoration">
                <view id="smallCircle"></view>
                <view id="line"></view>
              </view>
              <view>
                <view id="firstPerson">
                  <view id="personInformation">
                    审批人(导师)
                    <view id="name">
                      张三
                    </view>
                  </view>
                  <view id="surname">
                    张
                  </view>
                </view>
                <view id="line_1">
                  会签-------------------------------1人通过即可进入下一节点
                </view>
                <view id="otherPerson">
                  <view id="personInformation">
                    审批人(导师)
                    <view id="name">
                      王五
                    </view>
                  </view>
                  <view id="surname">
                    王
                  </view>
                </view>
              </view>
            </view>
            <view id="h1_1">
              <view id="decoration_2">
                <view id="smallCircle"></view>
                <view id="line_2"></view>
              </view>
              <view>
                <view id="otherPerson_2">
                  <view id="personInformation">
                    审批人(学校副党委书记)
                    <view id="name">
                      贺磊
                    </view>
                  </view>
                  <view id="surname">
                    贺
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view id="bt_1">
        <button class="modify-btn">撤销申请</button>
      </view>
    </div>
<!-- 这个与组件写的有差异,所以这里选择使用复制过来并修改的方法 -->
  </div>
</template>

<style scoped>
.top{
  width: 100%;
  height: 270px;
  background-color: #D80000;
  border-radius: 0 0 20px 20px;
  position: relative;
  z-index: 1;
  color: #ffffff;
}
.main{
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}
.xinxi{
  width: 90%;
  height: 157px;
  background: #fff;
  display: flex;
  float: left;
  z-index: 10;
  position: relative;
  align-items: center;
  justify-content: center;
  top: -30px;
  border-radius: 12px;
}
.liucheng{
  width: 90%;
  height: 162px;
  background: #fff;
  display: flex;
  float: left;
  z-index: 10;
  position: relative;
  flex: auto;
  top: -20px;
  box-shadow: 0 2px 4px #e6e6e64d;
  border-radius: 12px;
}
.pizhun{
  width: 90%;
  height: 333px;
  border-radius: 12px;
  box-shadow: 0 2px 4px #e6e6e64d;
  float: left;
  z-index: 10;
  position: relative;
  top: -5px;
}
.jianjie{
  height: 73.5px;
  width: 100%;
  float: left;
}
.icon{
  height: 60px;
  width: 60px;
  position: absolute;
  right: 16px;
  top: 8px;
}
.shang{
  display: flex;
  float: left;
  position: absolute;
  top: 116px;
  left: 76px;
}
.xiaolian{
  width: 60px;
  height: 60px;
}
.xia{
  width: 90%;
  display: flex;
  float: left;
  position: absolute;
  bottom: 13px;
  left: 15px;
}
.anniu{
  font-size: 14px;
  color: #6a6a6a;
  position: absolute;
  right: 12px;
}
#background{
  display: flex;
  padding: 10px;
  width: 345px;
  height: 430px;
  border-radius: 12px;
  box-shadow: 0 2px 4px #c8c7cc;
  justify-content: space-between;
}

#h1_1{
  display: flex;
}

#smallCircle{
  margin-top: 5px;
  margin-left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #fff;
  border: 4px solid #2264ff;
}

#line{
  margin-left: 16px;
  margin-top: 5px;
  width: 0;
  height: 270px;
  background: transparent;
  border: 0.5px solid #2264ff;
}

#firstPerson{
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#name{
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  color: #808080;
}

#surname{
  color: #f8f8f8;
  width: 58px;
  height: 58px;
  border-radius: 58px;
  text-align: center;
  font-size: 35px;
  background: #2264ff;
}

#line_1{
  color: #8f939c;
  font-size: 13px;
}

#line_2{
  margin-left: 16px;
  margin-top: 5px;
  width: 0;
  height: 90px;
  background: transparent;
  border: 0.5px solid #2264ff;
}

#otherPerson{
  margin-top: 50px;
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#otherPerson_2{
  margin-top: -15px;
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#decoration_2{
  margin-top: -15px;
}
.h1{
  text-align: center;
}
/* 按钮样式 */


/*修改了一些数据,让按钮看起来更自然 */
.modify-btn {
  width: 330px;
  height: 50px;
  background-color: #007bff;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}
.modify-btn:hover {
  background-color: #0056b3;
  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
}

#bt_1{
  margin-top: 20px;
}
</style>